<template>
  <Card dis-hover>
    <div class="search-form-bar">
      <Form label-colon :label-width="120">
        <Row>
          <Col :xs="16" :sm="19" :md="20" :lg="21">
            <Row :gutter="16">
              <slot/>
            </Row>
          </Col>
          <Col :xs="8" :sm="5" :md="4" :lg="3" style="text-align: right">
            <Button v-if="shouldShowShowMore && !showMore" @click="showMore=true">更多</Button>
            <Button type="primary" label="small" @click="handleSearch" :disabled="searchBtn">{{
                searchBtnText
              }}
            </Button>
            <Button label="dashed" @click="clearSearch" v-if="showClear">清空</Button>
          </Col>
        </Row>
      </Form>
      <Row v-if="showMore">
        <Col :xs="16" :sm="19" :md="20" :lg="21">
          <Row>
            <slot name="more"/>
          </Row>
        </Col>
        <Col :xs="8" :sm="5" :md="4" :lg="3" style="text-align: right">
          <Button v-if="shouldShowShowMore && showMore" @click="showMore=false">收起</Button>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>
import {Row, Col, Button} from "view-design";

export default {
  name: "SearchBar",
  components: {
    Row,
    Col,
    Button
  },
  model: {
    event: ["onSearch"]
  },
  props: {
    searchBtnText: {type: String, default: "查询"},
    showClear: {type: Boolean, default: true},
    showMore: {type: Boolean, default: false},
    /** vuex module名称 */
    namespace: {type: String, required: false},
    dataModule: {type: Object, default: null},
    searchBtn: {type: Boolean, default: false}
  },
  data: function () {
    return {
      // isSearchBtn: false
    };
  },
  computed: {
    /** 是否应该展示更多 */
    shouldShowShowMore: function () {
      let moreSlot = this.$slots.more;
      return moreSlot ? true : false;
    }
  },
  created() {
    // console.log(this.isSearchBtn, 'qqqq')
  },
  methods: {
    handleSearch: function () {
      let result = this.$emit("onSearch");
      if (this.namespace) {
        this.$store.dispatch(`${this.namespace}/query`, {
          limit: {
            currentPage: 1
          }
        });
      }
    },
    clearSearch() {
      this.$emit('childFn', this.dataModule);
    }
  }
};
</script>

<style lang="less">
.search-form-bar {
  &__action {
    text-align: right;

    .ivu-form-item-content {
      margin-left: 0 !important;
    }

    .ivu-btn:not(:first-of-type) {
      margin-left: 5px;
    }
  }

  position: relative;

  .ivu-date-picker {
    width: 100%;
  }
  .ivu-form {
    .ivu-form-item-label {
      padding-right: 2px;
      font-weight:normal;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
  }
}
</style>
